<template>
  <el-main>
    <div class="register">
      <!-- 登录验证规则 Register -->
      <div class="form_Content middle">
        <div class="manage_tip">
          <div class="stack aaa">
            <div class="hiti">
              <router-link to="/"
                ><img src="@/assets/img/dhlogo.png" class="logo"
              /></router-link>
            </div>
            <div class="text-xs">
              <router-link to="/Login"><span>主办方登录</span></router-link>
            </div>
          </div>
        </div>
        <div class="form_layout">
          <div class="card">
            <div class="brows">
              <span>注册多会账号</span>
              <p>请选择注册的帐号类型</p>
            </div>
            <div class="login_form"><!-- :model绑定名字 rules校验规则 ref帮助获取表单内容 class定义样式 -->
              <el-form :label-position="labelPosition" :model="registerUser" :rules="rules" ref="registerForm" label-width="80px" class="registerForm">
                <el-form-item class="item_label" label="用户名" prop="name">
                  <el-input v-model="registerUser.name" placeholder="请输入用户名" ></el-input>
                </el-form-item>
                <el-form-item class="item_label" label="手机" prop="phone">
                  <el-input v-model="registerUser.phone" placeholder="请输入手机号码"></el-input>
                </el-form-item>
                <el-form-item class="item_label" label="邮箱" prop="email">
                  <el-input v-model="registerUser.email" placeholder="请输入邮箱"></el-input>
                </el-form-item>
                <el-form-item class="item_label" label="密码" prop="password">
                  <el-input type="password" v-model="registerUser.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item><!-- 点击按钮 进行注册 相当于发送一个表单 所以拿到ref -->
                  <el-button style="width: 100%;" type="primary" class="submit_btn" @click="submitForm('registerForm')">注册</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-main>
</template>

<script>
import axios from 'axios'
export default {
  name: 'register',
  components: {},
  data () {
    return {
      labelPosition: 'top',
      registerUser: { name: '', phone: '', email: '', password: '' },
      rules: {
        name: [
          { required: true, message: '请输入 用户名', trigger: 'blur' },
          { min: 3, max: 30, message: '长度在3到30个字符之间', trigger: 'blur' }
        ],
        phone: [{ required: true, message: '请填写 手机', trigger: 'blur' }],
        email: [
          { required: true, message: '请输入 邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: '请输入 密码', trigger: 'blur' },
          { min: 6, max: 30, message: '长度在3到30个字符之间', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      const that = this
      this.$refs[formName].validate(valid => {
        if (valid) {
          setTimeout(() => {
            that.$message({
              message: '注册成功',
              type: 'success'
            })
            that.$router.push('/login')
          }, 1000)

          // 调用axios
          // axios.get('', params).then(res => {
          //   // 注册成功
          //   that.$message({
          //     message: '注册成功',
          //     type: 'success'
          //   })
          // }).catch(err => {
          //   console.log(err)
          // })
          // that.$router.push('/login')
        }
      })
    }
  }
}
</script>

<style scoped>
@import "~@/assets/css/template.css";
.el-main {
  margin: 0;
  padding: 0;
  background-color: #f4f6f8;
}
.form_Content {
  min-width: 998px;
  height: 1000px;
}
.register .manage_tip {
  padding: 50px 58px 0 30px;
}
.logo {
  width: 60px;
}
.text-xs {
  font-size: 12px;
  color: #006fbb;
}
.manage_tip .stack {
  display: flex !important;
}
.manage_tip .aaa {
  align-items: center;
}
.manage_tip .hiti {
  flex: 1 1 auto;
}
.form_layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  width: 934px;
  margin-left: 25px;
  margin-top: 10px;
}
.card {
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05),
    0 1px 3px 0 rgba(63, 63, 68, 0.15);
  flex: 2 2 48rem;
  min-width: 51%;
}
.form_layout .brows {
  text-align: center;
  font-weight: normal;
  padding-top: 39px;
  padding-bottom: 39px;
}
.form_layout .brows span {
  font-size: 24px;
  color: #182026;
}
.form_layout .brows p {
  font-size: 16px;
  --text-opacity: 1;
  color: #a0aec0;
  color: rgba(160, 174, 192, var(--text-opacity));
  margin-top: 16px;
}
.login_form {
    padding: 0 158px;
}
</style>
